//展示商品类表
let username = localStorage.getItem('username')
let token = localStorage.getItem('token')
let uid = localStorage.getItem('uid')
$.ajax({
	type: "get",
	url: "http://jx.xuzhixiang.top/ap/api/productlist.php",
	data: {
		uid
	}
}).then(res => {
	console.log(res.data)
	let arr = res.data
	let html = ''
	for (let i = 0; i < 5; i++) {
		let pobj = arr[i]
		html +=
			`
			<li onclick="plistItem(${pobj.pid})" style="cursor:pointer;background:#fff;" class="bingll">
				<img src="${pobj.pimg}">
				<p>${pobj.pname}</p>
				<span style="color: red;">￥${pobj.pprice}</span>
			</li>
			`

	}

	console.log(html)
	$('.pList').html(html)
})
$.ajax({
	type: "get",
	url: "http://jx.xuzhixiang.top/ap/api/productlist.php",
	data: {
		uid
	}
}).then(res => {
	console.log(res.data)
	let arr = res.data
	let html = ''
	for (let i = 5; i < 10; i++) {
		let pobj = arr[i]
		html +=
			`
			<li onclick="plistItem(${pobj.pid})" style="cursor:pointer;background:#fff;" class="bingll">
				<img src="${pobj.pimg}">
				<p>${pobj.pname}</p>
				<span style="color: red;">￥${pobj.pprice}</span>
			</li>
			`

	}

	console.log(html)
	$('.p1List').html(html)
})
$.ajax({
	type: "get",
	url: "http://jx.xuzhixiang.top/ap/api/productlist.php",
	data: {
		uid
	}
}).then(res => {
	console.log(res.data)
	let arr = res.data
	let html = ''
	for (let i = 10; i < 15; i++) {
		let pobj = arr[i]
		html +=
			`
			<li onclick="plistItem(${pobj.pid})" style="cursor:pointer;background:#fff;" class="bingll">
				<img src="${pobj.pimg}">
				<p>${pobj.pname}</p>
				<span style="color: red;">￥${pobj.pprice}</span>
			</li>
			`

	}

	console.log(html)
	$('.p2List').html(html)

	$.ajax({
		type: "get",
		url: "http://jx.xuzhixiang.top/ap/api/productlist.php",
		data: {
			uid
		}
	}).then(res => {
		console.log(res.data)
		let arr = res.data
		let html = ''
		for (let i = 15; i < 20; i++) {
			let pobj = arr[i]
			html +=
				`
				<li onclick="plistItem(${pobj.pid})" style="cursor:pointer;background:#fff;" class="bingll">
					<img src="${pobj.pimg}">
					<p>${pobj.pname}</p>
					<span style="color: red;">￥${pobj.pprice}</span>
				</li>
				`

		}

		console.log(html)
		$('.p3List').html(html)

		$.ajax({
			type: "get",
			url: "http://jx.xuzhixiang.top/ap/api/productlist.php",
			data: {
				uid
			}
		}).then(res => {
			console.log(res.data)
			let arr = res.data
			let html = ''
			for (let i = 0; i < 5; i++) {
				let pobj = arr[i]
				html +=
					`
					<li onclick="plistItem(${pobj.pid})" style="cursor:pointer;background:#fff;" class="bingll">
						<img src="${pobj.pimg}">
						<p>${pobj.pname}</p>
						<span style="color: red;">￥${pobj.pprice}</span>
					</li>
					`

			}

			console.log(html)
			$('.p4List').html(html)
			$.ajax({
				type: "get",
				url: "http://jx.xuzhixiang.top/ap/api/productlist.php",
				data: {
					uid
				}
			}).then(res => {
				console.log(res.data)
				let arr = res.data
				let html = ''
				for (let i = 5; i < 10; i++) {
					let pobj = arr[i]
					html +=
						`
						<li onclick="plistItem(${pobj.pid})" style="cursor:pointer;background:#fff;" class="bingll">
							<img src="${pobj.pimg}">
							<p>${pobj.pname}</p>
							<span style="color: red;">￥${pobj.pprice}</span>
						</li>
						`

				}

				console.log(html)
				$('.p5List').html(html)
				$.ajax({
					type: "get",
					url: "http://jx.xuzhixiang.top/ap/api/productlist.php",
					data: {
						uid
					}
				}).then(res => {
					console.log(res.data)
					let arr = res.data
					let html = ''
					for (let i = 10; i < 15; i++) {
						let pobj = arr[i]
						html +=
							`
							<li onclick="plistItem(${pobj.pid})" style="cursor:pointer;background:#fff;" class="bingll">
								<img src="${pobj.pimg}">
								<p>${pobj.pname}</p>
								<span style="color: red;">￥${pobj.pprice}</span>
							</li>
							`

					}

					console.log(html)
					$('.p6List').html(html)
					$.ajax({
						type: "get",
						url: "http://jx.xuzhixiang.top/ap/api/productlist.php",
						data: {
							uid
						}
					}).then(res => {
						console.log(res.data)
						let arr = res.data
						let html = ''
						for (let i = 15; i < 20; i++) {
							let pobj = arr[i]
							html +=
								`
								<li onclick="plistItem(${pobj.pid})" style="cursor:pointer;background:#fff;" class="bingll">
									<img src="${pobj.pimg}">
									<p>${pobj.pname}</p>
									<span style="color: red;">￥${pobj.pprice}</span>
								</li>
								`

						}

						console.log(html)
						$('.p7List').html(html)
						$.ajax({
							type: "get",
							url: "http://jx.xuzhixiang.top/ap/api/productlist.php",
							data: {
								uid
							}
						}).then(res => {
							console.log(res.data)
							let arr = res.data
							let html = ''
							for (let i = 5; i < 10; i++) {
								let pobj = arr[i]
								html +=
									`
									<li onclick="plistItem(${pobj.pid})" style="cursor:pointer;background:#fff;" class="bingll">
										<img src="${pobj.pimg}">
										<p>${pobj.pname}</p>
										<span style="color: red;">￥${pobj.pprice}</span>
									</li>
									`

							}

							console.log(html)
							$('.p8List').html(html)
						})
					})
				})
			})
		})
	})

})
//点击跳转到详情
function plistItem(id) {
	open('xiangqing.html?pid=' + id)
}

//

var mySwiper = new Swiper('.swiper-container', {
	speed: 3500,

	loop: true,
	autoplay: {
		delay: 3000,
		disableOnInteraction: false,
		waitForTransition: true,
	},
})







// 导航栏 移入移出
$('#ssss').hover(function() {
	$('.xiala').css({
		display: "block"
	})
}, function() {
	$('.xiala').css({
		display: "none"
	})
})

$('.xiala').hover(function() {
	$('.xiala').css({
		display: "block"
	})
}, function() {
	$('.xiala').css({
		display: "none"
	})
})


// // 


$('.pinpai1 span').hover(function() {
	$('.pinpai1 span').css({
		background: '#fff'
	})
	$('.pinpai1 p').css({
		background: '#ccc'
	})
	$('.cs2').css({
		display: "none"
	})
	$('.cs1').css({
		display: "block"
	})
})

$('.pinpai1 p').hover(function() {
	$('.pinpai1 p').css({
		background: '#fff'
	})
	$('.pinpai1 span').css({
		background: '#ccc'
	})
	$('.cs1').css({
		display: "none"
	})
	$('.cs2').css({
		display: "block"
	})
})
//

$('.dao').hover(function() {
	$('.rrr').css({
		display: "block"
	})
}, function() {
	$('.rrr').css({
		display: "none"
	})
})

$('.rrr').hover(function() {
	$('.rrr').css({
		display: "block"
	})
}, function() {
	$('.rrr').css({
		display: "none"
	})
})
//
$('#caoo1').hover(function() {
	$('.tule1').css({
		display: "block"
	})
}, function() {
	$('.tule1').css({
		display: "none"
	})
})

$('.tule1').hover(function() {
	$('.tule1').css({
		display: "block"
	})
}, function() {
	$('.tule1').css({
		display: "none"
	})
})

$('#caoo2').hover(function() {
	$('.tule2').css({
		display: "block"
	})
}, function() {
	$('.tule2').css({
		display: "none"
	})
})

$('.tule2').hover(function() {
	$('.tule2').css({
		display: "block"
	})
}, function() {
	$('.tule2').css({
		display: "none"
	})
})
$('#caoo3').hover(function() {
	$('.tule3').css({
		display: "block"
	})
}, function() {
	$('.tule3').css({
		display: "none"
	})
})

$('.tule3').hover(function() {
	$('.tule3').css({
		display: "block"
	})
}, function() {
	$('.tule3').css({
		display: "none"
	})
})
$('#caoo4').hover(function() {
	$('.tule4').css({
		display: "block"
	})
}, function() {
	$('.tule4').css({
		display: "none"
	})
})

$('.tule4').hover(function() {
	$('.tule4').css({
		display: "block"
	})
}, function() {
	$('.tule4').css({
		display: "none"
	})
})

$('#caoo5').hover(function() {
	$('.tule5').css({
		display: "block"
	})
}, function() {
	$('.tule5').css({
		display: "none"
	})
})

$('.tule5').hover(function() {
	$('.tule5').css({
		display: "block"
	})
}, function() {
	$('.tule5').css({
		display: "none"
	})
})
$('#caoo6').hover(function() {
	$('.tule6').css({
		display: "block"
	})
}, function() {
	$('.tule6').css({
		display: "none"
	})
})

$('.tule6').hover(function() {
	$('.tule6').css({
		display: "block"
	})
}, function() {
	$('.tule6').css({
		display: "none"
	})
})
$('#caoo7').hover(function() {
	$('.tule3').css({
		display: "block"
	})
}, function() {
	$('.tule3').css({
		display: "none"
	})
})

$('.tule3').hover(function() {
	$('.tule3').css({
		display: "block"
	})
}, function() {
	$('.tule3').css({
		display: "none"
	})
})
$('#caoo8').hover(function() {
	$('.tule5').css({
		display: "block"
	})
}, function() {
	$('.tule5').css({
		display: "none"
	})
})

$('.tule5').hover(function() {
	$('.tule5').css({
		display: "block"
	})
}, function() {
	$('.tule5').css({
		display: "none"
	})
})
$('#caoo9').hover(function() {
	$('.tule2').css({
		display: "block"
	})
}, function() {
	$('.tule2').css({
		display: "none"
	})
})

$('.tule2').hover(function() {
	$('.tule2').css({
		display: "block"
	})
}, function() {
	$('.tule2').css({
		display: "none"
	})
})

$('#caoo10').hover(function() {
	$('.tule3').css({
		display: "block"
	})
}, function() {
	$('.tule3').css({
		display: "none"
	})
})

$('.tule3').hover(function() {
	$('.tule3').css({
		display: "block"
	})
}, function() {
	$('.tule3').css({
		display: "none"
	})
})

//
$(function() {

	let flag = true;
	$(window).scroll(function() {
		if (flag) {
			let st = $(this).scrollTop();

			if (st > 500) {
				$("#floorNav").fadeIn();
			} else {
				$("#floorNav").fadeOut();
			}

			$(".titi").each(function(i, v) {


				if (st >= $(this).offset().top - $(this).outerHeight() / 2) {
					// console.log($(this).offset().top)

					$("#floorNav li").eq(i).addClass("hover").siblings().removeClass("hover");
					console.log()
				}


			})

		}

	})


	$('#floorNav li:not(:last)').click(function() {
		flag = false;

		let index = $(this).index();
		// console.log(index)

		$(window).scrollTop($(".titi").eq(index).offset().top);

		$("#floorNav li").eq(index).addClass("hover").siblings().removeClass("hover");

		$('body,html').stop().animate({
			"scrollTop": $(".titi").eq(index).offset().top
		}, 800, function() {
			flag = true;
		});


	})

	$("#floorNav li:last").click(function() {
		$(window).scrollTop();
	})


})
//
